<template>
	<div>
    <title1 ref="title" @getFatherData="setData" :value="titleValue"></title1>
    <button @click="select">显示</button>
    <button @click="add">自增</button>
    <!-- <body1 ref="body" :urlArray="urlArray"></body1> -->
    <footer1 :count="count" :names="name" @getValue="setValue"></footer1>
    <button @click="getsunData">点击看子组件的属性</button>
    <h1>{{value}}</h1>
    <router-link to="/userManager?name=张三">跳转到用户管理页</router-link>
    <input type="text" v-model="name1"/>
    <router-link :to="changeRouter()"><button>跳转</button></router-link>
    <router-link to="/userManager/1/张三">跳转到用户管理页1</router-link>
    <router-link to="/index2">跳转到index2</router-link>
    <button @click="changeIndex2">跳转到index2</button>
    <h1>{{date|formatDate}}</h1>
    <div v-ztext="'你啊'"></div>
    <button @click="flag=!flag">变</button>
    <transition enter-active-class="animated infinite rollIn"
                leave-active-class="animated infinite rollOut"
                :duration="{enter:500,leave:500}">
        <h1 v-if="flag">变变变</h1>
    </transition>
  </div>
</template>

<script>
  import title1 from '@/components/title'
  import body1 from '@/components/body'
  import footer1 from '@/components/footer'
  import animate from 'animate.css'
	export default{
    name:"index",
		data(){
			return{
        titleValue:"我是传递给头部组件的内容",
        urlArray:[require("../assets/01.jpg"),require("../assets/01.jpg")],
        count:300,
        name:["张三","李四","王五"],
        value:0,
        name1:"",
        date:new Date(),
        flag:true
			}
		},
		components:{
      title1
      ,body1
      ,footer1
		},
		methods:{
      getsunData(){
        let sunData=this.$refs.body.getData();
        console.log(sunData);
      },
      select(){
        let age=this.$refs.title.getAge();
        console.log(age);
      },
      setData(param){
        console.log("我在子组件中被调用了")
        console.log(param)
      },
      add(){
        this.$refs.title.addNum();
      },
      setValue(){
        this.value++
      },
      changeRouter(){
        return "/userManager?name="+this.name1;
      },
      changeIndex2(){
        // this.$router.push({path:"/index2",query:{user:{name:"张三",sex:"1"}}})
        this.$router.push({name:"index2",params:{user:{name:"张三",sex:"1"}}})
      }
		},
    //添加局部过滤器
    filters:{
      formatDate(item){
        return new Date(item).toLocaleString().replace(/:\d{1,2}$/,' ');
      }
    },
    //添加局部自定义指令
    directives:{
      ztext(el,binding){
        el.innerText=binding.value;
      }
    }
	}
</script>

<style>
</style>
